<template>
  <div class="content-info">
    <LabelTitle text="事件等级分析" :showImg="false"></LabelTitle>
    <div class="content-box mt10">
      <div class="sjbh-echarts mr20">
        <EchartsComponent
          :options="pieData"
          :lengthData="lenglist.length"
        ></EchartsComponent>
        <div class="center-title">
          <!-- <p class="num">{{ totalNum }}</p> -->
          <p class="title">事件等级</p>
        </div>
      </div>
      <div class="right-lengend">
        <div
          class="type-box"
          v-for="(item, index) in lenglist"
          :class="{ active: index % 2 == 100 }"
          :key="index"
        >
          <span class="color" :style="{ background: color[index] }"></span>
          <span class="text exlipse" :title="item.type">{{ item.type }}</span>
          <span class="text">{{ item.persent }}</span>
          <span class="text">{{ item.num }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import LabelTitle from '@/components/labeltitle.vue';
import EchartsComponent from '@/components/echarts.vue';
import { onMounted } from 'vue';
import pie from '../pie.vue';

const props = defineProps({
  allData: Object,
});

let pieData = ref([]);
let color = ref([
  '#FFCE40',
  '#05BDF7',
  '#F14747',
  '#2D9BFC',
  '#28BC59',
  '#FFCF37',
  '#F97E7E',
  '#AA57FF',
  '#6CECE6',
]);
let lenglist = ref([]);

let totalNum = ref(0);
const getData = async () => {
  try {
    // 检查 props.allData 是否为 undefined 或 eventClassAnalysis 是否为数组
    if (
      !props.allData ||
      !props.allData.eventClassAnalysis ||
      !Array.isArray(props.allData.eventClassAnalysis)
    ) {
      console.warn('props.allData 或 eventClassAnalysis 未正确初始化');
      return;
    }
    let data = [];

    props.allData.eventClassAnalysis.forEach((item) => {
      data.push({
        type: item.eventClassDesc,
        num: item.cnt,
        persent: item.percent + '%',
      });
    });
    lenglist.value = data;
    let arr = [];
    data.forEach((item, index) => {
      arr.push({
        value: item.num,
        name: item.type,
        itemStyle: {
          color: color.value[index],
        },
      });
    });
    pieData.value = {
      backgroundColor: 'transparent',
      animation: true,
      title: {
        show: false,
        text: '社区服务',
        subtext: '32个',
        x: '13%',
        y: '20%',
        textStyle: {
          color: '#B0D9FF',
          fontSize: 40,
          align: 'top',
          lineHeight: 50,
        },
        subtextStyle: {
          color: '#fff',
          fontSize: 46,
          fontWeight: '600',
          align: 'center',
          lineHeight: 50,
        },
      },

      series: [
        {
          type: 'pie',
          center: ['46%', '50%'],
          radius: ['55%', '75%'],
          minAngle: 5, // 设置最小角度
          color: color,
          startAngle: 135,
          labelLine: {
            show: false,
            normal: {
              show: false,
              length: 25,
            },
          },
          itemStyle: {
            normal: {
              borderWidth: 5,
              borderColor: '#fff',
            },
          },
          label: {
            show: false,
            normal: {
              show: false,
              formatter: '{b|{b}:}  {per|{d}%} ',
              backgroundColor: 'rgba(255, 147, 38, 0)',
              borderColor: 'transparent',
              borderRadius: 4,
              rich: {
                a: {
                  color: '#999',
                  lineHeight: 22,
                  align: 'center',
                },
                hr: {
                  borderColor: '#aaa',
                  width: '100%',
                  borderWidth: 1,
                  height: 0,
                },
                b: {
                  color: '#b3e5ff',
                  fontSize: 16,
                  lineHeight: 33,
                },
                c: {
                  fontSize: 14,
                  color: '#eee',
                },
                per: {
                  color: '#FDF44E',
                  fontSize: 14,
                  padding: [5, 8],
                  borderRadius: 2,
                },
              },
              textStyle: {
                color: '#fff',
                fontSize: 16,
              },
            },
          },
          emphasis: {
            label: {
              show: false,
              formatter: '{b|{b}:}  {per|{d}%}  ',
              backgroundColor: 'rgba(255, 147, 38, 0)',
              borderColor: 'transparent',
              borderRadius: 4,
              rich: {
                a: {
                  color: '#999',
                  lineHeight: 22,
                  align: 'center',
                },
                hr: {
                  borderColor: '#aaa',
                  width: '100%',
                  borderWidth: 1,
                  height: 0,
                },
                b: {
                  color: '#fff',
                  fontSize: 18,
                  lineHeight: 33,
                },
                c: {
                  fontSize: 14,
                  color: '#eee',
                },
                per: {
                  color: '#FDF44E',
                  fontSize: 25,
                  padding: [5, 6],
                  borderRadius: 2,
                },
              },
            },
          },
          data: arr,
        },
      ],
    };
  } catch (e) {
    console.error(e.message);
  }
};

watch(
  () => props.allData,
  (newval) => {
    getData();
  },
  {
    deep: true,
    immediate: true,
  }
);

onMounted(() => {});
</script>

<style lang="scss" scoped>
.content-info {
  width: 33%;
  // height: 250px;
  margin-right: 20px;

  .content-box {
    margin-top: 14px;
    height: 250px;
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(70, 102, 149, 0.06);
    border-radius: 12px;
    display: flex;
    align-items: top;
    // padding: 26px 47px 28px 0;
    overflow: hidden; // 防止内部滚动条导致容器溢出
    padding: 26px 20px 28px 0; // 右侧内边距减小（滚动条占用空间）
    .sjbh-echarts {
      width: 48%;
      height: 100%;
      position: relative;
      .center-title {
        width: 100px;
        height: 100px;
        position: absolute;
        text-align: center;
        border: 1px solid #eeeeee;
        left: 46%;
        top: 50%;
        transform: translate(-50%, -50%); // 精准居中
        padding-top: 40px;
        border-radius: 50%;
        .title {
          font-size: 14px;
          color: #666666;
        }
        .num {
          font-family: YouSheBiaoTiHei;
          color: #fff;
          font-size: 23px;
          font-weight: 600;
        }
      }
    }

    .right-lengend {
      width: 50%;
      max-height: 100%; // 限制最大高度
      overflow-y: auto; // 垂直滚动条
      padding-right: 8px; // 避免滚动条遮挡内容
      /* 自定义滚动条样式（可选） */
      &::-webkit-scrollbar {
        width: 4px; // 滚动条宽度
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc; // 滑块颜色
        border-radius: 2px;
      }
      &::-webkit-scrollbar-track {
        background: transparent; // 轨道颜色
      }
      .title {
        width: 100%;
        height: 26px;
        line-height: 26px;
        display: flex;
        align-items: center;
        background: #2263bf;
        span {
          display: inline-block;
          width: 33%;
          color: #ffffff;
          text-align: center;
        }
      }
      .type-box {
        width: 100%;
        height: 35px;
        line-height: 35px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        transition: background 0.3s; // 添加过渡动画
        &:hover {
          background: rgba(34, 99, 191, 0.1) !important; // 悬停浅蓝色背景
          .text {
            color: #2263bf !important; // 悬停文字变主题蓝
          }
        }
        &.active {
          background: rgba(34, 99, 191, 0.06);
        }

        .color {
          width: 10px;
          height: 10px;
          border-radius: 1px;
          margin-right: 10px;
          margin-left: 9px;
        }
        .text {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #666666;
          line-height: 35px;
          width: 30%;
          &:nth-child(3) {
            padding-left: 12px;
          }
          &:nth-child(4) {
            padding-left: 22px;
          }
        }
      }
    }
  }
}
</style>
